<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<div class="location-text"><Back></Back>修改头像</div>
		</header>

		<!-- 上传图片部分 -->
		<div class="upload-section">
			<input type="file" @change="onFileChange" accept="image/*" />
			<button @click="uploadAvatar" :disabled="!selectedFile">上传头像</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
// 导入共通组件
import Footer from '../components/Footer.vue';
import Back from '../components/Back.vue';

export default {
	name: 'Index',
	data() {
		return {
			user: {},  // 当前用户信息
			selectedFile: null,  // 选中的文件，初始化为 null
			avatarBase64: null,  // 头像的Base64编码
			avatarPreview: null  // 头像预览
		};
	},
	created() {
		// 模拟从 sessionStorage 中获取用户信息（可以根据你的实际情况调整）
		this.user = this.$getSessionStorage('user');
	},
	
	components: {
		Footer,
		Back
		
	},
	methods: {
		onFileChange(event) {
			const file = event.target.files[0];
			
			// 添加图片大小限制（例如不超过 2MB）
			if (file && file.size > 2 * 1024 * 1024) {
				alert('图片大小不能超过 2MB，请选择较小的图片');
				this.selectedFile = null;  // 重置选中的文件
				return;
			}
			
			if (file && file.type.startsWith('image/')) {
				this.selectedFile = file;  // 更新选中的文件
				this.convertToBase64(file);  // 转换为Base64
				this.previewAvatar(file);  // 生成预览
			} else {
				alert('请选择一个有效的图片文件');
				this.selectedFile = null;  // 重置为 null
			}
		},
		convertToBase64(file) {
			const reader = new FileReader();
			reader.onload = (e) => {
				this.avatarBase64 = e.target.result;  // 将Base64编码存储
								//alert(this.avatarBase64);
			};
			reader.readAsDataURL(file);  // 转换文件为Data URL (Base64)
		},
		previewAvatar(file) {
			const reader = new FileReader();
			reader.onload = (e) => {
				this.avatarPreview = e.target.result;  // 用于预览
			};
			reader.readAsDataURL(file);
		},
		uploadAvatar() {
			if (!this.avatarBase64) {
				alert('请先选择一个头像文件');
				return;
			}

			// 构造请求数据
			// const requestData = {
			// 	userId: this.user.userId,  // 假设已登录的用户信息中有 userId
			// 	avatarBase64: this.avatarBase64  // 将Base64编码传递给后端
			// };

			// 向后端发送请求，上传头像
			let url = `UserController/uploadAvatarBase64/${this.user.userId}/${this.avatarBase64}`;
			this.$axios.post(url)
				.then(response => {
					if (response.data.result==1) {
						alert('头像上传成功！');
						this.user.avatarUrl = response.data.avatarUrl;  // 更新用户头像
						this.avatarPreview = null;
					} else {
						alert('头像上传失败！');
					}
				})
				.catch(error => {
					console.error('上传过程中出现错误：', error);
					alert(`上传过程中出现错误：${error.response?.data?.message || '请重试'}`);
				});
		}
	}
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	font-size: 4.8vw;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.upload-section {
	margin: 20px 30px;
}

.upload-section input[type="file"] {
	margin-bottom: 10px;
}

.upload-section button {
	padding: 10px 20px;
	background-color: #0097FF;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.upload-section button:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}
</style>
